
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body class="form">
  <form>
    <label>
      <span>用户名</span>
      <input type="text">
    </label>
    <label>
      <span>密码</span>
      <input type="password">
    </label>
    <label>
      <span>确认密码</span>
      <input type="password">
    </label>
    <section>
      <button onclick="window.location.href='/login.html'" type="button">去登陆</button>
      <button id="submit" type="button">注册</button>
    </section>
  </form>
</body>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
  // 1. 获取元素
  var input = $('input')
  var btn = $('#submit')

  // 2. 事件触发
  btn.on('click', () => {
    var username = input[0].value;
    var password = input[1].value;
    var repass = input[2].value;
    // 3. 前端基础校验
    if (username.length < 2 || username.length > 10) {
      return alert('非法的用户名！')
    }
    if (password.length < 6 || password.length > 20) {
      return alert('非法的密码！')
    }
    if (password !== repass) {
      return alert("两次密码不一致！")
    }
    // 4. ajax请求接口
    $.ajax({
      url: "http://websong.wang:4000/user/registry",
      method: "post",
      data: {
        username,
        password
      }
    }).then(res => {
      if (res.code === 1) {
        // 5. 把用户名存起来
        localStorage.setItem('username', username)
        // 6. 跳到登陆页
        window.location.href = './login.html'
      } else {
        alert(res.msg)
      }
    })
  })
</script>

</html>